// @import url("@/uni.scss");
// // 定义变量
/**
 * 这里是uni-app内置的常用样式变量
 *
 * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
 * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
 *
 */

/**
 * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
 *
 * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
 */

/* 颜色变量 */

/* 行为相关颜色 */
$uni-color-primary: #007aff;
$uni-color-success: #4cd964;
$uni-color-warning: #f0ad4e;
$uni-color-error: #dd524d;

/* 文字基本颜色 */
$uni-text-color:#333;//基本色
$uni-text-color-inverse:#fff;//反色
$uni-text-color-grey:#999;//辅助灰色，如加载更多的提示信息
$uni-text-color-placeholder: #808080;
$uni-text-color-disable:#c0c0c0;

/* 背景颜色 */
$uni-chat-bottom-bg: #f7f7f7;
$uni-nav-bg-color: #EDEDED;
$uni-bg-color:#EDEDED;
$uni-bg-color-grey:#f8f8f8;
$uni-bg-color-hover:#f1f1f1;//点击状态颜色
$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色

/* 边框颜色 */
$uni-border-color:#D6D6D6;

/* 尺寸变量 */

/* 文字尺寸 */
$uni-font-size-sm:12px;
$uni-font-size-base:14px;
$uni-font-size-lg:16;

/* 图片尺寸 */
$uni-img-size-sm:20px;
$uni-img-size-base:26px;
$uni-img-size-lg:40px;

/* Border Radius */
$uni-border-radius-sm: 2px;
$uni-border-radius-base: 3px;
$uni-border-radius-lg: 6px;
$uni-border-radius-circle: 50%;

/* 水平间距 */
$uni-spacing-row-sm: 5px;
$uni-spacing-row-base: 10px;
$uni-spacing-row-lg: 15px;

/* 垂直间距 */
$uni-spacing-col-sm: 4px;
$uni-spacing-col-base: 8px;
$uni-spacing-col-lg: 12px;

/* 透明度 */
$uni-opacity-disabled: 0.3; // 组件禁用态的透明度

/* 文章场景相关 */
$uni-color-title: #2C405A; // 文章标题颜色
$uni-font-size-title:20px;
$uni-color-subtitle: #555555; // 二级标题颜色
$uni-font-size-subtitle:26px;
$uni-color-paragraph: #3F536E; // 文章段落颜色
$uni-font-size-paragraph:15px;


@for $i from 1 through 100 {
  .z-text-#{$i} {
    /* #ifdef APP-NVUE */
    font-size: $i + px;
     /* #endif */ 
     /* #ifndef APP-NVUE */
      @media (max-width: 600px) {
        font-size: $i * 2 + rpx;
      }
      @media (min-width: 600px) {
        font-size: $i + px;
      }
      /* #endif */ 
  }
  @each $offset,$classOffset in (padding,pd),(margin,ma) {
    .z-#{$classOffset}-#{$i} {
      /* #ifdef APP-NVUE */
      #{$offset}: $i + px;
       /* #endif */ 
       /* #ifndef APP-NVUE */
        @media (max-width: 600px) {
          #{$offset}: $i * 2 + rpx;
        }
        @media (min-width: 600px) {
          #{$offset}: $i + px;
        }
        /* #endif */ 
    }
    @each $position,$pos in (top,t),(right, r),(bottom, b),(left, l) {
      .z-#{$classOffset}-#{$pos}-#{$i} {
        /* #ifdef APP-NVUE */
        #{$offset}-#{$position}: $i + px;
         /* #endif */ 
         /* #ifndef APP-NVUE */
          @media (max-width: 600px) {
            #{$offset}-#{$position}: $i * 2 + rpx;
          }
          @media (min-width: 600px) {
            #{$offset}-#{$position}: $i + px;
          }
          /* #endif */ 
      }
    }
  }
}

// 定义混入
@mixin flexMixin($rowType) {
  display: flex;
  flex-direction: row !important;
  align-items: center;
  @if $rowType == 0 {
    justify-content: flex-start;
  }
  @if $rowType == 1 {
    justify-content: center;
  }
  @if $rowType == 2 {
    justify-content: space-between;
  }
  /*#ifdef APP-NVUE*/

  /*#endif*/
}

@mixin fontSizeMixin($number) {
  /* #ifdef APP-NVUE */
  font-size: $number + px;
  /* #endif */
  /* #ifndef APP-NVUE */
  @media (max-width: 600px) {
    font-size: $number * 2 + rpx;
  }
  @media (min-width: 600px) {
    font-size: $number + px;
  }
  /* #endif */
}

@mixin paddMixin($number, $padType) {
  @if $padType == 'left' {
    /* #ifdef APP-NVUE */
    padding-left: $number + px;
    /* #endif */
    /* #ifndef APP-NVUE */
    @media (max-width: 600px) {
      padding-left: $number * 2 + rpx;
    }
    @media (min-width: 600px) {
      padding-left: $number + px;
    }
    /* #endif */
  } @else if $padType == 'top' {
    /* #ifdef APP-NVUE */
    padding-top: $number + px;
    /* #endif */
    /* #ifndef APP-NVUE */
    @media (max-width: 600px) {
      padding-top: $number * 2 + rpx;
    }
    @media (min-width: 600px) {
      padding-top: $number + px;
    }
    /* #endif */
  } @else if $padType == 'right' {
    /* #ifdef APP-NVUE */
    padding-right: $number + px;
    /* #endif */
    /* #ifndef APP-NVUE */
    @media (max-width: 600px) {
      padding-right: $number * 2 + rpx;
    }
    @media (min-width: 600px) {
      padding-right: $number + px;
    }
    /* #endif */
  } @else if $padType == 'bottom' {
    /* #ifdef APP-NVUE */
    padding-bottom: $number + px;
    /* #endif */
    /* #ifndef APP-NVUE */
    @media (max-width: 600px) {
      padding-bottom: $number * 2 + rpx;
    }
    @media (min-width: 600px) {
      padding-bottom: $number + px;
    }
    /* #endif */
  } @else {
    /* #ifdef APP-NVUE */
    padding: $number + px;
    /* #endif */
    /* #ifndef APP-NVUE */
    @media (max-width: 600px) {
      padding: $number * 2 + rpx;
    }
    @media (min-width: 600px) {
      padding: $number + px;
    }
    /* #endif */
  }
}

@mixin marginMixin($number, $marType) {
  @if $marType == 'left' {
    /* #ifdef APP-NVUE */
    margin-left: $number + px;
    /* #endif */
    /* #ifndef APP-NVUE */
    @media (max-width: 600px) {
      margin-left: $number * 2 + rpx;
    }
    @media (min-width: 600px) {
      margin-left: $number + px;
    }
    /* #endif */
  } @else if $marType == 'top' {
    /* #ifdef APP-NVUE */
    margin-top: $number + px;
    /* #endif */
    /* #ifndef APP-NVUE */
    @media (max-width: 600px) {
      margin-top: $number * 2 + rpx;
    }
    @media (min-width: 600px) {
      margin-top: $number + px;
    }
    /* #endif */
  } @else if $marType == 'right' {
    /* #ifdef APP-NVUE */
    margin-right: $number + px;
    /* #endif */
    /* #ifndef APP-NVUE */
    @media (max-width: 600px) {
      margin-right: $number * 2 + rpx;
    }
    @media (min-width: 600px) {
      margin-right: $number + px;
    }
    /* #endif */
  } @else if $marType == 'bottom' {
    /* #ifdef APP-NVUE */
    margin-bottom: $number + px;
    /* #endif */
    /* #ifndef APP-NVUE */
    @media (max-width: 600px) {
      margin-bottom: $number * 2 + rpx;
    }
    @media (min-width: 600px) {
      margin-bottom: $number + px;
    }
    /* #endif */
  } @else {
    /* #ifdef APP-NVUE */
    margin: $number + px;
    /* #endif */
    /* #ifndef APP-NVUE */
    @media (max-width: 600px) {
      margin: $number * 2 + rpx;
    }
    @media (min-width: 600px) {
      margin: $number + px;
    }
    /* #endif */
  }
}
.clear_bg {
  background-color: transparent !important; // 主要给richText组件使用， 在nvue ios上会有默认背景  同时 style无法生效
}
.flex_shrink_0 {
  /* #ifndef APP-NVUE */
  flex-shrink: 0;
   /* #endif */ 
}
.z-text-center {
  text-align: center !important;
}


/*#ifdef H5*/
html {
  @media (max-width: 600px) {
    font-size: 28rpx !important;
  }
  @media (min-width: 600px) {
    font-size: 14px !important;
  }
}
/*#endif*/

/* #ifdef H5 */
body {
  background-color: $uni-bg-color;
  color: $uni-text-color;
  /* #ifdef APP-NVUE */
  font-size: 14px;
  /* #endif */
  /* #ifndef APP-NVUE */
  @media (max-width: 600px) {
    font-size: 28rpx;
  }
  @media (min-width: 600px) {
    font-size: 14px;
  }
  /* #endif */
}
/* #endif */

.z-red-text {
  color: red;
}
.z-green-text {
  color: green;
}
.z-white-text {
  color: #fff;
}
.z-primary-text {
  color: $uni-color-primary;
}
.z-flex-default {
  @include flexMixin(0);
}
.z-flex-center {
  @include flexMixin(1);
}
.z-flex-between {
  @include flexMixin(2);
}
.z-flex-default-start {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
}
.z-ios-padding {
  /*#ifndef APP-NVUE | UNI-APP-X*/
  padding-bottom: constant(safe-area-inset-bottom); //兼容IOS < 11.2
  padding-bottom: env(safe-area-inset-bottom); //兼容IOS > 11.2
  /*#endif*/
}
.z-status-bar {
  /*#ifndef APP-PLUS*/
  height: var(--status-bar-height);
  width: 100%;
  /*#endif*/
}
.z-page-container,
.page-container {
  height: 100%;
}
.page-container {
    padding-bottom: 3px;
    overflow: visible;
    // #ifdef H5
    flex: 1 1 auto;
    overflow: auto;
    // #endif
  }
.z-page-container {
  background-color: $uni-bg-color;
  /*#ifdef APP-PLUS*/
  flex: 1;
  /*#endif*/
}
.z-text-line-1 {
  /* #ifndef APP */
  word-break: break-all;
  overflow: hidden;
  display: -webkit-box; //将元素设为盒子伸缩模型显示
  -webkit-box-orient: vertical; //伸缩方向设为垂直方向
  -webkit-line-clamp: 1; //超出3行隐藏，并显示省略号
  /* #endif */
  /* #ifdef APP */
  lines: 1;
  text-overflow: ellipsis;
  /* #endif */
}
.z-text-line-2 {
  /* #ifndef APP */
  word-break: break-all;
  overflow: hidden;
  display: -webkit-box; //将元素设为盒子伸缩模型显示
  -webkit-box-orient: vertical; //伸缩方向设为垂直方向
  -webkit-line-clamp: 2; //超出3行隐藏，并显示省略号
  /* #endif */
  /* #ifdef APP */
  lines: 2;
  text-overflow: ellipsis;
  /* #endif */
}
.z-text-line-3 {
  /* #ifndef APP */
  word-break: break-all;
  overflow: hidden;
  display: -webkit-box; //将元素设为盒子伸缩模型显示
  -webkit-box-orient: vertical; //伸缩方向设为垂直方向
  -webkit-line-clamp: 3; //超出3行隐藏，并显示省略号
  /* #endif */
  /* #ifdef APP */
  lines: 3;
  text-overflow: ellipsis;
  /* #endif */
}
.z-text-tips {
  color: $uni-text-color-grey;
  @include fontSizeMixin(12);
}
.nav_icon-container {
  background-color: rgba(0, 0, 0, 0.3);
}
.nav_icon_bg-container {
  background-color: rgba(0, 0, 0, 0.3);
}
.global_icon_image {
    /* #ifdef APP-NVUE */
      width: 35px;
      height: 35px;
      // border: 1px solid red;
     /*#endif*/ 
    /* #ifndef APP-NVUE */
    @media (max-width: 600px) {
      width: 70rpx;
      height: 70rpx;
    }
    @media (min-width: 600px) {
      width: 35px;
      height: 35px;
    }
     /*#endif*/ 
}


.z-border {
  border: 1rpx solid $uni-border-color;
}
.z-border-l {
  border-left: 1rpx solid $uni-border-color;
}
.z-border-t {
  border-top: 1rpx solid $uni-border-color;
}
.z-border-r {
  border-right: 1rpx solid $uni-border-color;
}
.z-border-b {
  border-bottom: 1rpx solid $uni-border-color;
}
.z-circle {
  /* #ifndef APP */
  border-radius: 50%;
  /* #endif */

  /* #ifdef APP */
  border-radius: 9999px;
  /* #endif */
}
.z-shadow {
  box-shadow: 0 0 10rpx $uni-bg-color-mask;
}
